import React, { useState } from 'react';
import { Menu } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import { Form, Input, Button, notification, TablePaginationConfig, Tag, Upload, DatePicker, Modal, } from 'antd';
import UserTitle from './MyUtils/UserTitle';
import '../../../styles/Hospital Information/Physicalexaminationpackage.scss'

interface Props {

}
interface MenuItem {
    item: object
    key: string
}
function Physicalexaminationpackage(props: Props) {
    var [key, setKey] = useState('')

    var navigate = useNavigate();
    var handleClick = function ({ item, key }: MenuItem) {
        navigate(key);
        setKey(key)
    }

    var handle = () => {
        navigate('/login');
    }

    // 批量删除
    var toAllDel = () => {

    }

    // 新增
    // 控制新增表单的显示或隐藏
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 新增表单显示
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 新增表单验证通过，执行
    const onFinish = (values: any) => {
        console.log(values);
    }

    return (
        <div className='physical'>
            <div className="head">
                {
                    key == '/index/hospitalinformation/physicalexaminationpackage/package' ?
                        <UserTitle title={'体检套餐'} value={'新增文章'}>
                            <Button onClick={() => { toAllDel() }} style={{ marginRight: 10 }}>删除</Button>
                            <Button type="primary" onClick={showModal}>新增文章</Button>
                            <Modal title="编辑院区信息" footer={[]} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                                <Form
                                    name="basic"
                                    labelCol={{ span: 6 }}
                                    wrapperCol={{ span: 18 }}
                                    onFinish={onFinish}
                                >
                                    <Form.Item
                                        label="院区"
                                        name="yard"
                                        rules={[{ required: true, message: '输入院区', }]}
                                    >
                                        <Input placeholder='输入院区' />
                                    </Form.Item>

                                    <Form.Item
                                        label="文章标题"
                                        name="title"
                                        rules={[{ required: true, message: '输入文章标题' }]}
                                    >
                                        <Input placeholder='输入文章标题' />
                                    </Form.Item>

                                    <Form.Item
                                        label="文章内容"
                                        name="describe"
                                        rules={[{ required: true, message: '文章内容' }]}
                                    >
                                        <Input placeholder='输入文章内容' />
                                    </Form.Item>

                                    <Form.Item
                                        label="作者"
                                        name="author"
                                        rules={[{ required: true, message: '输入作者', }]}
                                    >
                                        <Input placeholder='输入作者' />
                                    </Form.Item>
                                    <Form.Item label="操作时间" name="operatingTime">
                                        <DatePicker />
                                    </Form.Item>
                                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                        <Button type="primary" htmlType="submit">
                                            添加
                                        </Button>
                                        <Button style={{ marginLeft: 20 }} onClick={() => { handleCancel() }}>
                                            取消
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Modal>
                        </UserTitle> :
                        key == '/index/hospitalinformation/physicalexaminationpackage/item' ?
                            <UserTitle title={'体检项目'} value={'新增文章'}>
                                <Button onClick={() => { toAllDel() }} style={{ marginRight: 10 }}>删除</Button>
                                <Button type="primary" onClick={showModal}>新增文章</Button>
                                <Modal title="编辑院区信息" footer={[]} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                                    <Form
                                        name="basic"
                                        labelCol={{ span: 6 }}
                                        wrapperCol={{ span: 18 }}
                                        onFinish={onFinish}
                                    >
                                        <Form.Item
                                            label="院区"
                                            name="yard"
                                            rules={[{ required: true, message: '输入院区', }]}
                                        >
                                            <Input placeholder='输入院区' />
                                        </Form.Item>

                                        <Form.Item
                                            label="文章标题"
                                            name="title"
                                            rules={[{ required: true, message: '输入文章标题' }]}
                                        >
                                            <Input placeholder='输入文章标题' />
                                        </Form.Item>

                                        <Form.Item
                                            label="文章内容"
                                            name="describe"
                                            rules={[{ required: true, message: '文章内容' }]}
                                        >
                                            <Input placeholder='输入文章内容' />
                                        </Form.Item>

                                        <Form.Item
                                            label="作者"
                                            name="author"
                                            rules={[{ required: true, message: '输入作者', }]}
                                        >
                                            <Input placeholder='输入作者' />
                                        </Form.Item>
                                        <Form.Item label="操作时间" name="operatingTime">
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                            <Button type="primary" htmlType="submit">
                                                添加
                                            </Button>
                                            <Button style={{ marginLeft: 20 }} onClick={() => { handleCancel() }}>
                                                取消
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                </Modal>
                            </UserTitle> :
                            <UserTitle title={'套餐类型'} value={'新增文章'}>
                                <Button onClick={() => { toAllDel() }} style={{ marginRight: 10 }}>删除</Button>
                                <Button type="primary" onClick={showModal}>新增文章</Button>
                                <Modal title="编辑院区信息" footer={[]} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                                    <Form
                                        name="basic"
                                        labelCol={{ span: 6 }}
                                        wrapperCol={{ span: 18 }}
                                        onFinish={onFinish}
                                    >
                                        <Form.Item
                                            label="院区"
                                            name="yard"
                                            rules={[{ required: true, message: '输入院区', }]}
                                        >
                                            <Input placeholder='输入院区' />
                                        </Form.Item>

                                        <Form.Item
                                            label="文章标题"
                                            name="title"
                                            rules={[{ required: true, message: '输入文章标题' }]}
                                        >
                                            <Input placeholder='输入文章标题' />
                                        </Form.Item>

                                        <Form.Item
                                            label="文章内容"
                                            name="describe"
                                            rules={[{ required: true, message: '文章内容' }]}
                                        >
                                            <Input placeholder='输入文章内容' />
                                        </Form.Item>

                                        <Form.Item
                                            label="作者"
                                            name="author"
                                            rules={[{ required: true, message: '输入作者', }]}
                                        >
                                            <Input placeholder='输入作者' />
                                        </Form.Item>
                                        <Form.Item label="操作时间" name="operatingTime">
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                            <Button type="primary" htmlType="submit">
                                                添加
                                            </Button>
                                            <Button style={{ marginLeft: 20 }} onClick={() => { handleCancel() }}>
                                                取消
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                </Modal>
                            </UserTitle>
                }
            </div>
            <div className="tablecountent">
                <Menu theme='light' mode="horizontal" defaultSelectedKeys={['/index/hospitalinformation/physicalexaminationpackage/package']} onClick={handleClick}>
                    <Menu.Item key="/index/hospitalinformation/physicalexaminationpackage/package" >体检套餐</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/physicalexaminationpackage/item" >体检项目</Menu.Item>
                    <Menu.Item key="/index/hospitalinformation/physicalexaminationpackage/type" >套餐类型</Menu.Item>
                </Menu>
                <Outlet></Outlet>
            </div>

        </div>
    );
}

export default Physicalexaminationpackage;